<html>
  <head>
    <title>小衣櫃雖小也能抓住你的心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="6-2.css">
    <script src="jquery-3.6.0.min.js"></script>
    <script src="6-2.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container">
      <div class="bar">
        <a href="index.html" target="_blank"><img class="imglog" src="../img/log.png" /></a>
        <ul class="barlist">
          <li>
            <a href="index.html" target="_blank">首页</a>              
          </li>
          <li>
            <a href="index.html" target="_blank">造型商城	</a>
          </li>
          <li>
            <a href="index.html" target="_blank">讨论区	</a>
          </li>
          <li>							
            <a href="index.html" target="_blank">	发帖链接</a>
            <ul>
              <li><a href="https://www.baidu.com/" target="_blank">百度</a></li> 
              <li><a href="https://www.qq.com/" target="_blank">腾讯</a></li> 
              <li><a href="https://weibo.com/" target="_blank">微博</a></li>
              <li><a href="https://www.boc.com/" target="_blank">中国银行</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="lefthouse">
        <label class="housetitle">冒险者小屋</label>
        <div class="house-content">
          <img src="img/0000000.gif" id="wall-img" alt="背景">
          <img src="img/0000000.gif" id="cape" alt="披風">
          <img src="img/0500000.gif" id="body" alt="身體">
          <img src="img/1210000.gif" id="pants" alt="褲子">
          <img src="img/1300001.gif" id="cloth" alt="上衣">
          <img src="img/0710001.gif" id="eyes" alt="眼睛">
          <img src="img/0000000.gif" id="glasses" alt="眼鏡">
          <img src="img/0901011.gif" id="hair" alt="頭髮">
          <img src="img/0000000.gif" id="hat" alt="帽子">
          <img src="img/0000000.gif" id="pet" alt="寵物">
        </div>
        <button id="save-Dess">保存當前裝扮</button>
        <button id="reset-Dess">恢復原狀</button>
      </div>
      <div class="tablist">
        <input id="tab-commodity" type="radio" name="grp" checked="checked">
        <label class="tablab" for="tab-commodity">热门商品</label>
        <div class="tab-content">
          <ul class="ul-commodity">
            <li>
              <img src="icon/1100000.png" class="content-img" />
              <div>
                <label class="img-title">黄帽子</label>
                <label class="img-price">$60</label>
                <p><button class="try-on try-on-commodity">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>

              <img src="icon/1100001.png" class="content-img" />
              <div>
                <label class="img-title">白帽子</label>
                <label class="img-price">$60</label>
                <p><button class="try-on try-on-commodity">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="icon/1100003.png" class="content-img" />
              <div>
                <label class="img-title">草帽</label>
                <label class="img-price"><label class="discount-price">$49</label>$79</label>
                <p><button class="try-on try-on-commodity">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-modelling" type="radio" name="grp">
        <label class="tablab" for="tab-modelling">帽子</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/hat_0047.png" class="content-img" />
              <div>
                <label class="img-title">狐狸帽</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on try-on-hat">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="icon/hat_0049.png" class="content-img" />
              <div>
                <label class="img-title">紅帽</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-hat">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-glassees" type="radio" name="grp">
        <label class="tablab" for="tab-glassees">眼镜</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/eye2_0001.png" class="content-img" />
              <div>
                <label class="img-title">邊框眼鏡</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on try-on-glassees">試穿</button><button
                    class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="icon/eye2_0002.png" class="content-img" />
              <div>
                <label class="img-title">無邊框眼鏡</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-glassees">試穿</button><button
                    class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-jacket" type="radio" name="grp">
        <label class="tablab" for="tab-jacket">上衣</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/coat_0006.png" class="content-img" />
              <div>
                <label class="img-title">綠色上衣</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on try-on-jacket">試穿</button><button class="purchase">購買</button>
                </p>
              </div>
            </li>
            <li>
              <img src="icon/coat_0005.png" class="content-img" />
              <div>
                <label class="img-title">橙色上衣</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-jacket">試穿</button><button class="purchase">購買</button>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-trousers" type="radio" name="grp">
        <label class="tablab" for="tab-trousers">裤子</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/pants_0002.png" class="content-img" />
              <div>
                <label class="img-title">藍褲子</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on try-on-trousers">試穿</button><button
                    class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="icon/pants_0003.png" class="content-img" />
              <div>
                <label class="img-title">橙色褲子</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-trousers">試穿</button><button
                    class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-cloak" type="radio" name="grp">
        <label class="tablab" for="tab-cloak">披风</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/cope_0003.png" class="content-img" />
              <div>
                <label class="img-title">白翅膀</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on  try-on-cloak">試穿</button><button class="purchase">購買</button>
                </p>
              </div>
            </li>
            <li>
              <img src="icon/cope_0004.png" class="content-img" />
              <div>
                <label class="img-title">黑翅膀</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-cloak">試穿</button><button class="purchase">購買</button>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-pet" type="radio" name="grp">
        <label class="tablab" for="tab-pet">宠物</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="icon/pet_1002.png" class="content-img" />
              <div>
                <label class="img-title">小黑狗</label>
                <label class="img-price"><label class="discount-price">$49</label><label
                    class="coust">$79</label></label>
                <p><button class="try-on try-on-pet ">試穿</button><button class="purchase">購買</button>
                </p>
              </div>
            </li>
            <li>
              <img src="icon/pet_1003.png" class="content-img" />
              <div>
                <label class="img-title">粉紅兔</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-pet">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
        <input id="tab-background" type="radio" name="grp">
        <label class="tablab" for="tab-background">背景</label>
        <div class="tab-content">
          <ul class="ul-modelling">
            <li>
              <img src="img/0000003.gif" class="content-img" />
              <div>
                <label class="img-title">背景黃色</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="img/0000004.gif" class="content-img" />
              <div>
                <label class="img-title">背景紅色</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="img/0000005.gif" class="content-img" />
              <div>
                <label class="img-title">背景粉色</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="img/0000006.gif" class="content-img" />
              <div>
                <label class="img-title">夜</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="img/0000007.gif" class="content-img" />
              <div>
                <label class="img-title">天空</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
            <li>
              <img src="img/0000008.gif" class="content-img" />
              <div>
                <label class="img-title">月</label>
                <label class="img-price">$79</label>
                <p><button class="try-on try-on-background">試穿</button><button class="purchase">購買</button></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="purchase-alert" class="dispalyNone">請先充值</div>
  </body>
</html>